<script setup lang='ts'>
import dHeader from './dHeader.vue'
import dTable from './dTable.vue'
import dFooter from './dFooter.vue'
import {props, emits as allEmits} from './dTablePromote'
import { ref } from 'vue'
defineProps(props)

const emits = defineEmits(allEmits)

const dTableRef = ref()

//提交搜索表单
const onSubmit = () => {
  //先验证 TODO
  emits('formSubmit')
}

//清楚搜索表单
const onClear = () => {
  emits('formClear')
}

//操作
const onOperation = (name:string) => {
  emits('operation', name)
}

//排序改变
const onSortChange = (sort:{column:any, prop:string, order:'ascending'|'descending'}) => {
  emits('sortChange', {prop:sort.prop, order:sort.order})
}

//选中单元格
const onCellClick = (row, col) => {
  emits('cellClick', row, col)
}

//选中
const onRowClick = (row) => {
  emits('rowClick', row)
}

//多选
const onMultipleSelection = (rows:Array<any>) => {
  emits('multipleSelection', rows)
}


//页面SIZE改变
const onSizeChange = () => {
  emits('sizeChange')
}

//页数改变
const onCurrentChange = () => {
  emits('currentChange')
}

// 当前行选择
const setSeleted = (row?) => {
  dTableRef.value && dTableRef.value.setSeleted(row)
}

// 暴露选择行方法
defineExpose({setSeleted})
</script>

<template>
  <div class="d-common-full d-common-flex-col">
    <d-header
      v-if="showHeader"
      :show-loading="showLoading"
      :oper-buttons="operButtons"
      :search-rules="searchRules"
      :search-form-data="searchFormData"
      :search-form-items="searchFormItems"
      :search-buttons="searchButtons"
      :search-from-justify="searchFromJustify"
      :search-from-full="searchFromFull"
      :force-show-button="forceShowButton"
      :label-width="labelWidth"
      @form-submit="onSubmit"
      @form-clear="onClear"
      @operation="onOperation"
    >
      <template #operbutton-prepend>
        <slot name="operbutton-prepend" />
      </template>
      <template #operbutton-append>
        <slot name="operbutton-append" />
      </template>
      <template #searchbutton-prepend>
        <slot name="searchbutton-prepend" />
      </template>
      <template #searchbutton-append>
        <slot name="searchbutton-append" />
      </template>
      <template v-for="searchitem in searchFormItems" #[searchitem.prop]="scope">
        <slot v-if="searchitem.type==='slot'" :name="scope.item.slotName" :data="scope.data" :item="scope.item" />
      </template>
    </d-header>
    <d-table
      ref="dTableRef"
      class="d-common-flex-full"
      :row-key="rowKey"
      :table-ref-key="tableRefKey"
      :table-data="tableData"
      :show-selection="showSelection"
      :show-index="showIndex"
      :stripe="stripe"
      :empty-text="emptyText"
      :highlight-current-row="highlightCurrentRow"
      :border="border"
      :default-sort="defaultSort"
      :default-seleted="defaultSeleted"
      :default-multiple-selection="defaultMultipleSelection"
      :table-header-data="tableHeaderData"
      :table-head-height="tableHeadHeight"
      :table-row-height="tableRowHeight"
      :show-loading="showLoading"
      :tree-config="treeConfig"
      :page-size="pageConfig?pageConfig.pageSize:999"
      :current-page="pageConfig?pageConfig.currentPage:1"
      :scroll-item="scrollItem"
      :scroll-top="scrollTop"
      :show-summary="showSummary"
      :sum-text="sumText"
      :auto-height="autoHeight"
      :height="height"
      :max-height="maxHeight"
      :span-method="spanMethod"
      :selectable="selectable"
      :row-class-name="rowClassName"
      @sort-change="onSortChange"
      @cell-click="onCellClick"
      @row-click="onRowClick"
      @multiple-selection="onMultipleSelection"
    >
      <template v-for="item in tableHeaderData" #[item.prop]="scope">
        <slot v-if="item.columnType==='slot'" :name="item.prop" :row="scope.row" :item="scope.item" :index="scope.index" />
      </template>
      <template #append>
        <slot name="append" />
      </template>
    </d-table>
    <d-footer
      v-if="showFooter"
      :show-loading="showLoading"
      :page-config="pageConfig"
      :footer-buttons="footerButtons"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      @operation="onOperation"
    />
  </div>
</template>

<style scoped>
</style>